<!--
 * @Author: 471826078@qq.com
 * @Date: 2020-06-03 13:47:54
 * @LastEditors: younghxp
 * @LastEditTime: 2022-02-21 11:20:49
-->
<template>
  <div class="unRealName">
    <div class="unRealNameSearch">
      <el-row
        class="toolbar searchInputWidth"
        style="padding-bottom: 0"
        v-if="easyModel"
      >
        <el-form :inline="true" :model="filterField">
          <el-col :lg="8" :xl="6">
            <el-form-item label="区域">
              <el-cascader
                ref="manageArea"
                v-model="areaId"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="行业">
              <el-select
                placeholder="请选择"
                clearable
                v-model="filterField.industryId"
              >
                <el-option
                  v-for="item in industryOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="项目状态">
                <el-select
                  placeholder="请选择"
                  clearable
                  v-model="filterField.status"
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="投资类型">
                <el-select
                  placeholder="请选择"
                  clearable
                  v-model="filterField.investment"
                  v-if="activeName != 10"
                >
                  <el-option
                    v-for="item in investmentOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <el-select
                  placeholder="请选择"
                  clearable
                  v-model="filterField.investment"
                  v-if="activeName == 10"
                >
                  <el-option
                    v-for="item in investmentOptionsCz"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="建档日期">
                <timeSelection
                  @getStartTimeValue="getStartTimeValue"
                  @getEndTimeValue="getEndTimeValue"
                  :startTime="startTimeValue"
                  :endTime="endTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="项目名称">
                <el-input
                  v-model="filterField.projectName"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="开工日期">
                <timeSelection
                  @getStartTimeValue="getStartTimeValueTwo"
                  @getEndTimeValue="getEndTimeValueTwo"
                  :startTime="startTimeValueTwo"
                  :endTime="endTimeValueTwo"
                ></timeSelection>
              </el-form-item>
            </el-col>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
          </el-col>
          <!-- <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              class="commonBtn"
              v-sdc
              @click="searchList"
            ></el-button>
          </el-form-item> -->
        </el-form>
      </el-row>
    </div>
    <div class="unRealNameMain">
      <div class="header">
        <span v-if="activeName == 1" class="headerTips">
          项目录入的实名制总人数低于
          {{ days1 }} ，统计包括各类型人员；需监督项目落实录入
        </span>
        <span v-if="activeName == 3" class="headerTips"
          >统计的是系统内专户账号为空的项目明细，要求施工方开设项目专户，已开设专户需要企业在系统录入专户信息</span
        >
        <span v-if="activeName == 4" class="headerTips"
          >项目已录入专户，但未缴存资金，需督促建设方缴存资金</span
        >
        <span v-if="activeName == 10" class="headerTips"
          >无资金拨付的财政项目，需要财政部门进行资金拨付处理</span
        >
        <div class="headerBox">
          <!-- <colSetup
            :datas="lists"
            :more="true"
            @getSelectMenuId="getSelectMenuId"
            style="display:inline-block"
            :activeName="activeName"
          /> -->
          <div class="colSetupBottom" style="float: left">
            <colSetup
              :tableColList="colSetupTableCol"
              @getSelectMenuId="getSelectMenuIds"
              :mark="mark"
            />
          </div>
          <el-button
            type="primary"
            class="funComBut saveBtn"
            icon="icon iconfont icondaochu"
            @click="toExportExcel"
            style="margin-left: 12px"
          >
            <!-- <el-button type="primary" class="funComBut saveBtn"  icon="icon iconfont icondaochu" @click="exportE"> -->
            导出报表
          </el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableList"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        v-loading="loading"
        border=""
        style="border: 1px solid #dfe6ec"
        :max-height="tableHeight"
        ref="tableBox1"
        @header-dragend="handleDragend"
      >
        <!-- <el-table-column
          :prop="item.prop"
          :label="item.label"
          align="left"
          :formatter="formatTd"
          v-for="(item) in fixedList"
          :key="item.id"
          default-expand-all
          :fixed="item.fixed"
          min-width="160"
           v-if = "item.isShow"
        ></el-table-column> -->
        <el-table-column
          :min-width="
            item.prop === 'projectName' || item.prop === 'pbName' ? 230 : 180
          "
          :label="item.label"
          :property="item.prop"
          v-for="item in fixedList"
          :key="item.id"
          default-expand-all
          :fixed="item.fixed"
          :sortable="
            [
              'startDate',
              'endDate',
              'realNameTotal',
              'total',
              'cycle',
              'endDate',
              'archiveDate',
            ].includes(item.prop)
              ? true
              : false
          "
          v-if="item.isShow"
          :formatter="formatTd"
        >
          <template slot-scope="scope">
            <div v-if="item.prop == 'projectName'">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row[scope.column.property]"
                :columnName="'projectName'"
              ></copyText>
            </div>
            <div v-else-if="item.prop == 'pbName'">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row[scope.column.property]"
                :columnName="'pbName'"
              ></copyText>
            </div>
            <div v-else>
              <span>{{
                scope.row[scope.column.property] !== 0
                  ? scope.row[scope.column.property] || '--'
                  : 0
              }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        ref="pagination"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
      ></Pagination>
    </div>
    <!-- <exportExcel
      :showExcel="showExcel"
      :excelTitle="list.label"
      :colmnList="list.children"
      :activeName="activeName"
      @closeExcel="closeExcel"
      @getExportList="getExportList"
    ></exportExcel> -->
    <exportExcel
      :colmnList="exportTableCol"
      @getExportList="getExportList"
      :mark="mark"
      v-if="isShowDialog"
      :dialogFormVisible="isShowExcel"
      @getSelectMenuId="getSelectMenuIds"
      @closeDialog="hiddenDialog"
    ></exportExcel>
  </div>
</template>
<script>
// import exportExcel from "@/components/publicCom/exportExcel1";
import exportExcel from '@/components/publicCom/exportExcel'

// import colSetup from "@/components/publicCom/colSetupMore";
import common from '../../kits/common'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'unRealName',
  components: {
    exportExcel,
    // colSetup
  },
  props: {
    list: {
      type: Object,
    },
    activeName: {
      type: Number,
    },
    areaId: {
      type: String,
    },
    industryId: {
      type: String,
    },
    status: {
      type: String,
    },
    industry: {
      type: String,
    },
    investmentType: {
      type: String,
    },
    investment: {
      type: String,
    },
  },
  created() {
    // this.filterField.name = this.$route.query.employeeName;
    this.getHeader('0')
    this.getHeader('1')
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  data() {
    return {
      tableHeight: null,
      advanced: false,
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > new Date()
        },
      },
      days1: 4,
      days: 4,
      date: [],
      showExcel: false,
      activeNames: this.activeName,
      // excelTitle: this.list.label,
      // lists: this.list.children,
      StartTimeValue: '',
      EndTimeValue: '',
      paramsList: [],
      areaId: '', //区域
      tableList: [],
      requestUrl: 'api-s/cs/statsprojectimprove/findPageByType',
      easyModel: true,
      filterField: {
        type: '01',
        projectName: '',
        areaId: '',
        industryId: this.industry ? this.industry : '',
        status: this.status ? this.status : '',
        investment: this.investmentType ? this.investmentType : '',
        archiveStartDate: '',
        archiveEndDate: '',
        projectStartDate: '',
        projectEndDate: '',
      },
      loading: false,
      startDate: '',
      investmentOptionsCz: [
        {
          id: 'GOV',
          name: '政府投资',
        },
      ],
      filterList: [],
      colSetupTableCol: [],
      exportTableCol: [],
      mark: 'projectDetailReport',
      isShowDialog: false,
      isShowExcel: false,
      headType: '',
    }
  },

  watch: {
    areaId: {
      handler(val, old) {
        if (typeof val == 'string') {
          this.filterField.areaId = val
        } else {
          var areaId = val[val.length - 1]
          this.filterField.areaId = areaId
        }
      },
      deep: true,
      immediate: true,
    },
    industryId(val) {
      this.filterField.industryId = val
    },
    status(val) {
      this.filterField.status = val
    },
    investment(val) {
      this.filterField.investment = val
    },
    activeName(val, oldVal) {
      if (val <= 9) {
        this.filterField.type = val == 0 ? '' : '0' + val
      } else {
        this.filterField.type = val == 0 ? '' : val
      }
      if (oldVal > 0) {
        //切换tab 搜索栏清空
        this.filterField.industryId = ''
        //   this.filterField.status = '';
        this.filterField.investment = ''
        this.filterField.projectName = ''
        this.filterField.archiveStartDate = ''
        this.filterField.archiveEndDate = ''

        this.startTimeValue = ''
        this.endTimeValue = ''

        this.startTimeValueTwo = ''
        this.endTimeValueTwo = ''

        this.date = ''
        this.startDate = ''
        this.filterField.projectStartDate = ''
        this.filterField.projectEndDate = ''
      }
      this.getHeader('0')
      this.getHeader('1')
      this.$refs.pagination.getTableListData()
      if (val == 1) {
        this.getSetting('employee_total')
      }
    },
  },
  computed: {
    ...mapState([
      'investmentOptions',
      'statusOptions',
      'areasOptions',
      'industryOptions',
    ]),
    fixedList: function () {
      this.filterList.forEach((v) => {
        // v.prop==="areaName"||v.prop==="industryName"||v.prop==="investmentDesc"||
        // console.log(this.filterList)
        if (v.prop === 'projectName') {
          v.fixed = true
        }
      })
      return this.filterList.filter((item) => {
        return item.isShow
      })
    },
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    ...mapActions([
      'getInvestmenttype',
      'getStatus',
      'getAreas',
      'getIndustry',
    ]),
    getTableList(data) {
      this.tableList = data
      this.loading = false
      // if (this.tableList.length < 1) {
      //   this.isShow = true;
      // }
      this.$nextTick(() => {
        this.$refs.tableBox1.doLayout()
      })
    },
    getType() {
      if (this.activeName == '1') {
        this.headType = 'REAL_TOTAL'
      } else if (this.activeName == '2') {
        this.headType = 'REAL_ATT_TOTAL'
      } else if (this.activeName == '3') {
        this.headType = 'INPUT_BANK_TOTAL'
      } else if (this.activeName == '4') {
        this.headType = 'DEPOSIT_FUND_TOTAL'
      } else if (this.activeName == '5') {
        this.headType = 'PAY_TOTAL'
      } else if (this.activeName == '6') {
        this.headType = 'LAST_NONTH_PAY_TOTAL'
      } else if (this.activeName == '7') {
        this.headType = 'PAY_DAY_TOTAL'
      } else if (this.activeName == '8') {
        this.headType = 'PS_TOTAL'
      } else if (this.activeName == '9') {
        this.headType = 'DEPOSIT_ACCASS_TOTAL'
      } else if (this.activeName == '10') {
        this.headType = 'AVAILABLE_FISCAL_TOTAL'
      } else if (this.activeName == '11') {
        this.headType = 'ATT_MACHINE_TOTAL'
      }
    },

    /**
     * @description: 获取开始日期
     * @param {*} urls
     * @param {*} datas
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.archiveStartDate = val
        this.startTimeValue = val
      } else {
        this.filterField.archiveStartDate = ''
        this.startTimeValue = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.archiveEndDate = val
        this.endTimeValue = val
      } else {
        this.filterField.archiveEndDate = ''
        this.endTimeValue = ''
      }
    },
    /**
     * @description: 获取开始日期
     * @param {*} urls
     * @param {*} datas
     */
    getStartTimeValueTwo(val) {
      if (val) {
        this.filterField.projectStartDate = val
        this.startTimeValueTwo = val
      } else {
        this.filterField.projectStartDate = ''
        this.startTimeValueTwo = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValueTwo(val) {
      if (val) {
        this.filterField.projectEndDate = val
        this.endTimeValueTwo = val
      } else {
        this.filterField.projectEndDate = ''
        this.endTimeValueTwo = ''
      }
    },

    /**
     * @name: 获取之前设置的值
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    // 获取头部数据
    getHeader(complex) {
      this.getType()
      this.axios({
        method: 'post',
        data: { type: this.headType, complex: complex },
        url: 'api-s/dimension/head',
      })
        .then(
          (response) => {
            if (complex == '0') {
              this.filterList = response.data.result
            } else {
              var result = response.data.result
              for (let i = 0, len = result.length; i < len; i++) {
                for (
                  let j = 0, childLen = result[i].children.length;
                  j < childLen;
                  j++
                ) {
                  var childrenData = result[i].children[j]
                  if (
                    childrenData.prop == 'projectName' ||
                    childrenData.prop == 'cityName' ||
                    childrenData.prop == 'industryName' ||
                    childrenData.prop == 'countyName' ||
                    childrenData.prop == 'townName'
                  ) {
                    childrenData.disabled = true
                  }
                }
              }
              this.colSetupTableCol = JSON.parse(JSON.stringify(result)) //区别列设置和表格导出表头数据共用
              this.exportTableCol = JSON.parse(JSON.stringify(result))
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getSelectMenuIds(val, allVal) {
      this.filterList = val
      this.exportTableCol = JSON.parse(JSON.stringify(allVal))
      this.colSetupTableCol = JSON.parse(JSON.stringify(allVal))
      this.$nextTick(() => {
        this.$refs.tableBox1.doLayout()
      })
    },
    toExportExcel() {
      // this.showExcel = true;
      this.isShowDialog = true
      this.isShowExcel = true
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    hiddenDialog(val) {
      // this.showExcel = false;
      this.isShowDialog = false
      this.isShowExcel = false
    },
    getExportList(val) {
      this.isShowDialog = false
      this.isShowExcel = false
      const str = val
      // let str = [];
      // exportArr.forEach(item => {
      //   if (item.isDefault) {
      //     str.push(item.name);
      //   }
      // });
      if (this.tableList.length) {
        let activeNames
        if (this.activeName <= 9) {
          activeNames = this.activeName == 0 ? '' : '0' + this.activeName
        } else {
          activeNames = this.activeName == 0 ? '' : this.activeName
        }
        this.filterField.areaId =
          this.filterField.areaId == undefined ? '' : this.filterField.areaId
        // const activeNames = "0" + this.activeName;
        window.location.href =
          common.commonApi +
          `api-s/cs/statsprojectimprove/exportProjectImprove?type=${activeNames}&` +
          'exportType=PROJECT_IMPROVE&' +
          'field=' +
          str.join(',') +
          '&projectName=' +
          this.filterField.projectName +
          '&areaId=' +
          this.filterField.areaId +
          '&industryId=' +
          this.filterField.industryId +
          '&status=' +
          this.filterField.status +
          '&investment=' +
          this.filterField.investment +
          '&archiveStartDate=' +
          this.filterField.archiveStartDate +
          '&archiveEndDate=' +
          this.filterField.archiveEndDate +
          '&projectStartDate=' +
          this.filterField.projectStartDate +
          '&projectEndDate=' +
          this.filterField.projectEndDate +
          '&access_token=' +
          localStorage.getItem('access_token')
        this.$alert('报表生成中，请稍等', '温馨提示', {
          confirmButtonText: '确定',
          callback: (action) => {},
        })
        this.$emit('setList', { list: val, activeName: this.activeName }) //传值给父级，保存设置
      } else {
        this.$message({
          type: 'warning',
          message: '导出字段为空',
        })
      }
      // this.showExcel = false;
    },
    // 搜索
    // searchList() {
    //   if (this.date) {
    //     this.filterField.archiveStartDate = this.date[0]?this.date[0]:'';
    //     this.filterField.archiveEndDate = this.date[1]?this.date[1]:'';
    //   } else {
    //     this.filterField.archiveStartDate = "";
    //     this.filterField.archiveEndDate = "";
    //   }
    //   if (this.startDate) {
    //     this.filterField.projectStartDate = this.startDate[0]?this.startDate[0]:'';
    //     this.filterField.projectEndDate = this.startDate[1]?this.startDate[1]:'';
    //   } else {
    //     this.filterField.projectStartDate = "";
    //     this.filterField.projectEndDate = "";
    //   }
    //   this.$refs.pagination.getTableListData();
    // },
    /**
     * @name: 获取之前设置的值
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    getSetting(name) {
      this.axios({
        method: 'post',
        data: { name },
        url: 'api-s/cs/statsparamconfig/findParamByName',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              // this.days = response.data.result;
              this.days1 = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
  },
  mounted() {
    if (this.activeName <= 9) {
      this.filterField.type = this.activeName == 0 ? '' : '0' + this.activeName
    } else {
      this.filterField.type = this.activeName == 0 ? '' : this.activeName
    }
    this.loading = true
    this.getInvestmenttype({})
    this.getStatus({})
    this.getIndustry({})
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    if (this.activeName == 1) {
      this.getSetting('employee_total')
    }
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - 292
      // 监听窗口大小变化
      let self = this
      window.onresize = function () {
        self.tableHeight = window.innerHeight - 292
      }
    })
  },
}
</script>
<style lang="less" scoped>
.unRealNameSearch {
  border-bottom: 10px solid #f5f7fa;
  margin-top: 24px;
}
.baseSearch {
  position: relative;
  padding-left: 102px;
  &Title {
    position: absolute;
    top: 0;
    left: 0;
    height: 36px;
    line-height: 36px;
    width: 96px;
    text-align: right;
    display: inline-block;
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    color: #333333;
  }
  &Item {
    margin-left: 17px;
    margin-bottom: 24px;
  }
}
.moreSearch {
  position: relative;
  padding-left: 119px;
  //   min-height: 36px;

  &Title {
    position: absolute;
    top: 0;
    left: 0;
    height: 36px;
    line-height: 36px;
    width: 96px;
    text-align: right;
    display: inline-block;
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    color: #333333;
  }
  &List {
    margin-bottom: 24px;
    &Left {
      display: inline-block;
    }
    &Right {
      display: inline-block;
      margin-left: 17px;
      width: 230px;
      .el-input {
        width: 100%;
      }
    }
  }
}
.actionBox {
  position: relative;
  padding-left: 119px;
  margin-bottom: 24px;
  &Add {
    line-height: 34px;
    border-radius: 18px;
    width: 76px;
    border-color: #009588;
    color: #009588;
    padding: 0;
  }
  &Search {
    position: absolute;
    top: 0;
    right: 17px;
  }
}
.unRealNameMain {
  padding: 16px 24px 16px;
  .header {
    padding-bottom: 16px;
    min-height: 52px;
    text-align: left;
    line-height: 36px;
    position: relative;
    &Tips {
      display: block;
      width: calc(100% - 240px);
      font-size: 14px;
      color: #333333;
    }
    &Box {
      position: absolute;
      right: 0;
      top: 0;
      height: 36px;
    }
    .el-button {
      line-height: 36px;
      height: 36px;
      // vertical-align: middle;
      img {
        vertical-align: sub;
      }
    }
  }
}
@import '../../../static/css/filterArea.less';
</style>
